<template>
  <div class="header">
    <div class="columns header_wrapper">
      <div class="column is-2 logo">
        <router-link :to="{name: 'Index'}">
          <img src="./../../assets/images/logo.png" />
        </router-link>
      </div>
      <div class="column is-8 menu">
        <ul class="menu" v-show="category.length">
          <li>
            <router-link :to="{name: 'Index'}">首页</router-link>
          </li>
          <li v-for="(value, index) in category" :key="index">
            <router-link :to="{name: 'List', params: {id: value.id}}">{{ value.name }}</router-link>
          </li>
          <li><router-link :to="{name: 'Page', params: {id: 67}}">关于我们</router-link></li>
        </ul>
      </div>
      <div class="column is-2 contact">
        <button class="button is-primary header-button" @click="show=true">
          获取解决方案
        </button>
      </div>
    </div>

    <vodal :show="show" animation="flip" @hide="show = false" :height="300" :width="600">
      <div style="margin-top: 10px; padding: 20px;">
        <h1 style="font-size: 24px; margin-bottom: 20px;">免费咨询解决方案</h1>

        <div class="field">
          <p class="control">
            <input v-model="name" class="input" type="name" maxlength="8" placeholder="输入您的称呼">
          </p>
        </div>

        <div class="field">
          <p class="control">
            <input v-model="phone" class="input" type="phone" maxlength="11" placeholder="输入您的手机号码">
          </p>
        </div>

        <div class="field">
          <p class="control">
            <button class="button is-primary" @click="postComment">免费咨询</button>
          </p>
        </div>
      </div>
    </vodal>
  </div>
</template>

<script lang="ts">
import { Component, Vue } from 'vue-property-decorator'
import request from './../../request'

import Vodal from 'vodal'

@Component
export default class Header extends Vue {
  show: boolean = false
  name: string = ''
  phone: string = ''

  category: any[] = []

  created() {
    if (localStorage.getItem('HEADER')) {
      this.category = JSON.parse(localStorage.getItem('HEADER') || '{}')
    } else {
      request.getCategory().then(responseCategory => {
        this.category = responseCategory.data
        localStorage.setItem('HEADER', JSON.stringify(responseCategory.data))
      })
    }
  }

  postComment() {
    if (this.name === '' || this.phone === '') {
      alert('请输入您的称呼与手机号码')
      return
    }
    request
      .postComment({
        post: 53,
        author_name: this.name,
        content: this.phone
      })
      .then(response => {
        alert('提交成功，我们稍后会与您联系。')
        this.show = false
      })
      .catch(error => {
        if (error.toString().indexOf('409')) {
          alert('联系方式已提交，请勿重复提交')
        }
      })
  }
}
</script>

<style lang="scss" scoped>
.header {
  display: block;
  background-color: #255cb5;
  /*background-color: #f1f1f1;*/
  /*height: 50px;*/

  .header_wrapper {
    width: 1190px;
    display: flex;
    align-items: center;
    margin: 0 auto;

    & > div {
      padding: 0;
    }

    & > div:not(:first-child) {
      text-align: right;
    }
  }

  .logo {
    img {
      display: block;
      height: 50px;
    }
  }

  .menu {
    align-items: stretch;
    ul {
      li {
        display: inline-block;
        width: 100px;
        height: 100%;
        line-height: 40px;
        text-align: center;

        a {
          display: block;
          width: 100%;
          height: 100%;
          color: #f5f5f5;
          transition: all 0.3s;
          text-decoration: none;

          &:hover {
            color: #fe9a00;
            transition: all 0.3s;
          }
        }
      }
    }
  }
}

.vodal-dialog {
  background: url('./../../assets/images/bg_modal.jpg') no-repeat center;
  background-size: cover;
}

.vodal-close:before,
.vodal-close:after {
  border-radius: 0;
}
</style>
